<template>
    <div id="customer_notice_root">
      <div class="notice_block" :gradientBackground="{colors:['#252930','#2F3541'],orientation: 0, cornerRadius: 8}">
        <span class="span_title" :focusable="false">{{noticeTitle}}</span>
        <div class="notice_link" :duplicateParentState="true">
          <div class="span_confirm" v-for="(item,index) in noticeConfirm" :key="item.name"
               :focusable="true"
               :clipChildren="false"
               :requestFocus="index==0?true:false"
               @click="confirm(index)">
            <span class="txt" :duplicateParentState="true" :focusable="false">{{item.name}}</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
const {useESRouter} = require("@extscreen/es3-router");
import {defineComponent, onMounted,ref} from "vue";
import {useESToast,useESLocalStorage,useESEventBus} from '@extscreen/es3-core'

const {__CONFIG__} = require("../config/global");

const {useRequestManager} = require("../../api/UseApi");
export default defineComponent({
  name: "GameOverView",
  setup(props,{emit}) {
    const viewRef = ref()
    const router = useESRouter()
    var toast = useESToast();
    const noticeTitle = ref('')
    const noticeContent = ''
    const qrCodeData=ref('')
    const sceneNo=ref('')
    let timer = -1
    let loopQuery= -1
    var esLocalStorage = useESLocalStorage();
    var esEventBus = useESEventBus();
    function onESCreate(params){
      console.log(params)
      noticeTitle.value=params.message
    }
    const noticeConfirm= [
      {
        name: '确定',
        value: '1'
      }
    ]
    function onClose(evt) {
      evt.stopPropagation();
    }
    const show = () => {
      showDialog.value = true
    }

    function dismiss(){
      router.back()
    }
    function onBackPressed() {
      router.back()
    }
    function confirm(index) {
      switch(index){
        case 0://确定
          dismiss()
          break;
      }
    }
    return {
      noticeTitle,
      noticeContent,
      onClose,
      show,
      dismiss,
      onESCreate,
      qrCodeData,
      onBackPressed,
      noticeConfirm,
      confirm
    }
  }
})
</script>

<style scoped>
#customer_notice_root {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1920px;
  height: 1080px;
  background-color: rgba(0,0,0,0.5);
}
.notice_block {
  width: 1200px;
  height: 400px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.span_title {
  width: 1200px;
  height: 60px;
  margin-top: 70px;
  font-size: 40px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  background-color: transparent;
}

.notice_link {
  width: 1200px;
  height: 80px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  background-color: transparent;
}
.single_link {
  margin-right: 9px;
  margin-left: 9px;
  height: 70px;
  focus-background-color: #ffffff;
  border-radius: 44px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.span_link_left{
  color: #FF5415;
  font-size: 36px;
  padding-left: 18px;
}
.span_link {
  color: #FF5415;
  font-size: 36px;
  text-decoration:underline;
}
.span_link_right{
  color: #FF5415;
  font-size: 36px;
  padding-right: 18px;
}
.span_confirm {
  width: 260px;
  height: 80px;
  border-radius: 44px;
  background-color: rgba(255,255,255,0.1);
  justify-content: center;
  align-items: center;
  margin-right: 25px;
  margin-left: 25px;
  focus-background-color: #ffffff;
}
.txt {
  color: rgba(255,255,255,0.7);
  font-size: 36px;
  text-align: center;
  focus-color: #000000;
}
</style>
